<template>
	<view class="container">
		<view class="task-list">
			<!-- 条件渲染，如果没有待审批任务，则显示提示信息 -->
			<view v-if="sortedTasks.length === 0" class="no-tasks">
				<text>当前暂无待审批的工单</text>
			</view>
			<!-- 循环渲染待审批任务列表 -->
			<view v-else>
				<view v-for="task in sortedTasks" :key="task.id" class="task-item">
					<text>{{ task.id }}</text> {{ task.title }} - {{ task.userName }} - {{ task.createTime }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tasks: [], // 待审批工单列表
				sortedTasks: [] // 排序后的工单列表
			};
		},
		onLoad() {
			this.loadTasks();
		},
		methods: {
			async loadTasks() {
				try {
					const token = uni.getStorageSync('token');
					const res = await uni.request({
						url: "http://localhost:8082/api/approve/toApproveList",
						method: 'get',
						header: {
							'Authorization': 'Bearer ' + token
						}
					});

					if (res.statusCode === 200 && res.data.code === 1) {
						this.tasks = res.data.data;
						this.sortTasks();
					} else {
						uni.showToast({
							title: "加载待审批任务失败",
							icon: 'none'
						});
					}
				} catch (err) {
					uni.showToast({
						title: "请求接口失败" + err.message,
						icon: 'none'
					});
				}
			},
			sortTasks() {
				// 按紧急程度（高→中→低）和提交时间（近→远）排序
				this.sortedTasks = this.tasks.sort((a, b) => {
					if (a.urgency !== b.urgency) {
						return b.urgency - a.urgency; // 紧急程度高优先
					}
					return new Date(b.createTime) - new Date(a.createTime); // 提交时间近优先
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
		background-color: #f5f5f5f5;
		min-height: 100vh;
	}

	.task-list {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		padding: 10px;
	}

	.task-item {
		padding: 10px;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
	}

	.task-item:last-child {
		border-bottom: none;
	}

	.no-tasks {
		color: #888;
		text-align: center;
		padding: 20px 0;
	}
</style>